<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>富豪榜</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav>
    <ul>
      <li>主页</li>
      <li>排行榜</li>
      <li>联系方式</li>
    </ul>
  </nav>
  <!-- 头部内容 -->
  <div class="box">
    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
      <!-- 登陆按钮 -->
      <!-- <button id="login">登陆</button> -->
    </header>
    <!-- 主题内容 -->
    <div class="container">
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>

        <!-- 点击添加按钮
                  添加一个节  div -->

      </main>
    </div>
  </div>

  <script>
    let data = [{
        name: "English chan",
        money: 392001
      },
      {
        name: "alex chan",
        money: 568932
      },
      {
        name: "melon chan",
        money: 698756
      },
      {
        name: "Clare Langner",
        money: 292489
      },
      {
        name: "Abigail Rice",
        money: 953957
      },
      {
        name: "Clarice Dias",
        money: 168472
      },
      {
        name: "Vernon Lucas",
        money: 718225
      },
      {
        name: "Nina Schmidt",
        money: 889147
      },
    ];
    // 1.获取节点
    let addUser = document.querySelector('#add-user')
    let showMillionaire = document.querySelector('#show-millionaire')
    let sort = document.querySelector('#sort')
    let double = document.querySelector('#double')
    let calculate = document.querySelector('#calculate')
    let main = document.querySelector('#main')

    addUser.addEventListener('click', addUserFn)
    double.addEventListener('click', doubleFn)
    showMillionaire.addEventListener('click', showMillionaireFn)
    sort.addEventListener('click', sortFn)
    calculate.addEventListener('click', calculateFn)


    //  2.点击事件绑定
    let renderData = [] //专门渲染数据的
    let num = -1; //计数器 点击次数
    function addUserFn() {
      // 1.点击第一次，渲染第一条数据在main的盒子中
      //2.点击第二次，渲染第一条+第二条
      num++; //8
      if (num >= data.length) {
        return;
      }
      console.log(num);
      console.log(data[num]);
      renderData.push(data[num]);
      console.log(renderData);
     
      updateDom(renderData)
    }

    function doubleFn() {
        // renderData [{name:a,money:1},{money:2},{money:3}]

        // 翻倍方法1
        renderData.forEach(function(item){
          item.money *=2
        })

         //翻倍方法2
        // renderData =renderData.map(function(item){
        //   return {
        //     name:item.name,
        //     money:item.money*2
        //   }
        // })

        // es6写法
         // renderData =renderData.map(function(item){
        //   return {
        //    ...item,
        //     money:item.money*2
        //   }
        // })

        updateDom(renderData)
        
    }

    function showMillionaireFn() {
      //过滤百万富翁 filter
      renderData =renderData.filter(function(item){
        return item.money>1000000
      })
      updateDom(renderData)


    }

    function sortFn() {
       renderData.sort(function(a,b){
         return b.money-a.money
       })
       updateDom(renderData)
    }

    function calculateFn() {
          //算一个总数
          let total = 0;
          // renderData.forEach(function(item){
          //   total +=item.money
          // })
          // console.log(total);
         
         total= renderData.reduce(function(sum,item){
            return sum +=item.money
          },0)
           console.log(total);
          //  创建div
          let div =document.createElement('div')
          // 给这个div 上数据
          div.innerHTML =`<strong>总金额：</strong> ${formatMoney(total)}`
          // 把这个div挂树上
          main.appendChild(div)
        
    }

    //封装函数
    function updateDom(proviData){
          //清空上一次的渲染
          main.innerHTML = ` <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
         `
      
          //通过循环渲染到页面中
      renderData.forEach(function (item) {
        //1.创建节点 div
        let div = document.createElement('div')
        // 2.新增一个属性person+文本(结构+数据)
        div.classList.add("person")
        div.innerHTML = `
        <strong>
          ${item.name}
        </strong>
        <span>
          ${formatMoney(item.money)}
        </span>
        `
        //3.div 挂树上 
        main.appendChild(div)
      })
    }
    //转换金钱输出格式
    function formatMoney(money){
      //对这个money做操作
      //toLocaleString() 是官方自带一个关于金钱转换的操作
      //自动把 num 的数据 123456 =》123,456d的字符串
      return '$'+money.toLocaleString() +'.00'
    }


    // function toThousand(money){
    //   let str = money
    //   //123456 =》123，456
    //   //1234567 =》1，234，567
    //   // 1.Number=>字符 转换成 数组
    //     // ['1','2','3','4','5','6']
    //     // 2.newStr

    //   let strArr = money.toString().split('')
    //   console.log(strArr)
    //   // 接收数据的
    //   let arr=[]
    //   let count = 0
    //     //计数
    //   for(let i = strArr.length-1;i>=0;i--){
    //     count++
    //     console.log(strArr[i])
    //     arr.unshift(strArr[i])
    //     if(count %3 ===0 && i!=0){
    //       arr.unshift(',')
    //     }
    //   }
        
    //   console.log(arr);
    //   str =arr.join('')
    //   //  arr =['1','2','3','4','5','6']
    //   //  arr.join('')


    //   return str
    // }
  </script>
</body>

</html>